<template>
  <div class="container">
    <div class="search-line">
      <el-form :model="searchData" inline>
        <el-form-item label="用户名：">
          <el-input
            v-model="searchData.userName"
            placeholder="请输入用户名称"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input
            v-model="searchData.name"
            placeholder="请输入姓名"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>

      <div class="right-btn">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
    <div class="content">
      <div class="table-title">
        <span>用户列表</span>
        <el-button :icon="Plus" type="primary" @click="openAddDialog">
          新增用户
        </el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="ID" label="ID" />
        <el-table-column prop="userName" label="账号" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-popconfirm
              title="确认删除该用户?"
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="deleteRow(scope.row.ID)"
            >
              <template #reference>
                <el-button link type="primary" size="small"> 删除 </el-button>
              </template>
            </el-popconfirm>
            <!-- <el-button
              link
              type="primary"
              size="small"
              @click.prevent="edit(scope.row.id)"
            >
              编辑
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="my-pagination"
        v-model:current-page="searchData.page"
        v-model:page-size="searchData.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :background="true"
        layout="slot, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template #default>
          <span class="el-pagination__total is-first"> 共 {{ total }} 条 </span>
        </template></el-pagination
      >
    </div>
    <el-dialog
      v-model="dialogFormVisible"
      :title="form.id ? '编辑用户' : '新增用户'"
      width="500"
    >
      <el-form :model="form" ref="formRef" :rules="rules">
        <el-form-item label="用户名" label-width="100px" prop="userName">
          <el-input
            v-model="form.userName"
            :disabled="!!form.id"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="密码" label-width="100px" prop="password">
          <el-input
            v-model="form.password"
            :disabled="!!form.id"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="确认密码" label-width="100px" prop="rePassword">
          <el-input
            v-model="form.rePassword"
            :disabled="!!form.id"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="姓名" label-width="100px" prop="name">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话" label-width="100px" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Plus, Lock } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import {
  getUserListPage,
  addUser,
  deleteUserByID,
  updateEmplyee,
  getDetailById,
} from "../../api/index";
import { ElMessage } from "element-plus";
const searchData = ref({
  page: 1,
  pageSize: 10,
  name: "",
  userName: "",
});
const dialogFormVisible = ref(false);
const form = ref({
  userName: "",
  password: "",
  rePassword: "",
  name: "",
  phone: "",
});
const rules = ref({
  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  rePassword: [{ required: true, message: "请再次输入密码", trigger: "blur" }],
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  phone: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
});
const tableData = ref();
const total = ref(0);

onMounted(() => {
  init();
});
const init = async () => {
  const res = await getUserListPage(searchData.value).catch();
  tableData.value = res.data.records;
  total.value = res.data.total;
};
const search = async () => {
  init();
};
const reset = async () => {
  searchData.value.name = "";
  searchData.value.userName = "";
  init();
};
const handleSizeChange = async (val) => {
  init();
};
const handleCurrentChange = async (val) => {
  console.log(val);
  init();
};

//删除
const deleteRow = async (id) => {
  const res = await deleteUserByID(id);
  if (res.code == 200) {
    init();
    ElMessage({
      message: "操作成功",
      type: "success",
    });
    if (tableData.value.length === 1) {
      if (searchData.value.page != 1) searchData.value.page--;
      init();
    }
  }
};
const edit = async (val) => {
  form.value.id = val;
  dialogFormVisible.value = true;
  const res = await getDetailById({ id: val });
  form.value.name = res.data.name;
  form.value.username = res.data.username;
  form.value.phone = res.data.phone;
};
const openAddDialog = async () => {
  form.value.id = "";
  dialogFormVisible.value = true;
};
const formRef = ref();
const resetForm = async () => {
  form.value.id = "";
  formRef.value.resetFields();
};
const confirm = async () => {
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      if (form.value.id) {
        //修改
        const res = await updateEmplyee(form.value);
        if (res.code === 200) {
          ElMessage({
            message: "操作成功",
            type: "success",
          });
          dialogFormVisible.value = false;
          form.value.id = "";
          init();
        }
      } else {
        //新增
        const res = await addUser(form.value);
        if (res.code === 200) {
          ElMessage({
            message: "操作成功",
            type: "success",
          });
          dialogFormVisible.value = false;
          init();
        }
      }
      resetForm();
    }
  });
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
}
.search-line {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 0;
  .el-form-item {
    margin-bottom: 10px;
  }
}
.content {
  flex: 1;
  background-color: #fff;
  border-radius: 20px;
  padding: 10px;
  .table-title {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 20px;
    border-bottom: 1px solid black;
    padding: 0 10px 10px;
    margin-bottom: 10px;
  }
  .my-pagination {
    padding: 10px 0 0 10px;
  }
}
.my-pagination {
  padding: 10px 0 0 10px;
  display: flex;
  justify-content: center;
}
</style>
